<template>
  <a-image :width="width" :src="src || _imgSrc" :preview="preview" :placeholder="true"/>
</template>

<script setup lang="ts">
import api from "@/api"
import {utils} from "@/utils"
import {ref, watch} from "vue"

interface Props {
  src?: string,
  preview?: boolean,
  width: number,
  fileId: string,
  fileName?: string,
}
const props = defineProps<Props>()

const _imgSrc = ref<string>()

if (props.src) {
  buildImageUrl()
}

watch(() => props.fileId, () => {
  buildImageUrl()
})

function buildImageUrl(): void {
  api.downloadFile({uuid: props.fileId, fileName: props.fileName || ""}).then(fileResp => {
    let blob = new Blob([fileResp.data])
    utils.blobToBase64(blob, (val) => {
      _imgSrc.value = val
    })
  })
}
</script>
